<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>
    <script type="text/javascript">

        /**
         * 事件实践案例-滚轮滚动事件
         */
        window.onload = function () {
            //获取id为box1的div
            var box1 = document.getElementById("box1");

            /*
             * 为box1绑定鼠标滚轮滚动事件
             * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
             * 火狐不支持该属性，在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
             * 注意该事件需要通过addEventListener()函数来绑定
             */
            box1.onmousewheel = function (event) {

				//浏览器兼容：确保了在不同浏览器中都能正确获取到事件对象
				// 如果 event 存在（即现代浏览器），则使用它；
				//如果 event 不存在（即旧版本 IE），则使用 window.event。
                event = event || window.event;

                /*
                 * 当鼠标滚轮向下滚动时，box1变长
                 * 	当滚轮向上滚动时，box1变短
                 * 上滚正数，下滚负数
                 */
                //判断鼠标滚轮滚动的方向，火狐用detail，其他浏览器用wheelDelta
                if (event.wheelDelta > 0 || event.detail < 0) {
					//向上滚，box1变短
					box1.style.height = box1.clientHeight - 10 + "px";
                } else {
                    //向下滚，box1变长
                    box1.style.height = box1.clientHeight + 10 + "px";
                }

                /*
                 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                 * 需要使用event来取消默认行为event.preventDefault();
                 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
                 */
                event.preventDefault && event.preventDefault();

                /*
                 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
                 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                 */
                return false;
            };

            //浏览器兼容：为火狐绑定滚轮事件
            bind(box1, "DOMMouseScroll", box1.onmousewheel);
        };

        /**
         * 公共方法-给对象绑定事件
         * @param obj
         * @param eventStr
         * @param callback
         */
        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, false);
            } else {
                /*
                 * this是谁由调用方式决定
                 * callback.call(obj)
                 */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function () {
                    //在匿名函数中调用回调函数，
					//该匿名函数内部调用了用户提供的回调函数 callback，并通过 call 方法确保回调函数中的 this 指向 obj
                    callback.call(obj);
                });
            }
        }


    </script>
</head>
<body style="height: 2000px;">

<div id="box1"></div>

</body>
</html>
